<template>
  <div v-show="visibleItem()" class="yf-step-item">
    <slot></slot>
  </div>
</template>

<script lang="ts" setup>
import { getCurrentInstance, onMounted, computed, watch } from 'vue';
import { getParentSteps } from '@/components/utils/index';

const props = defineProps<{
  title: string;
  index: number | string;
}>();
const currentInstance = getCurrentInstance();
const YfSteps: any = getParentSteps(currentInstance, 'YfSteps');

const visibleItem = () => {
  return YfSteps.exposed?.current?.value == props.index;
};

onMounted(() => {
  if (YfSteps) {
    YfSteps.exposed?.stepsEvent.emit('add_step_child', { title: props.title, index: props.index });
  }
});
</script>

<style scoped></style>
